import React, { useEffect, useRef, useState } from 'react'
import { comRequest } from '../../request'
import * as echarts from 'echarts';
import moment from 'moment'
import { Button, Table, DatePicker, Select, Space, message, Calendar, Spin } from 'antd';
import "./index.less";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { getweekday, getDefultDate, disabledDate } from '../../utils'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn';
import { NextAndPreDayBar } from '../../components/NextAndPreDayBar'
const dateFormat = 'YYYY-MM-DD';
const KEY_CONFIG = {
    /** 上证50 */
    SZ50_JIN: 'sz50_jin',
    /** hs300_jin */
    HS300_JIN: 'hs300_jin',
    /** zz500_jin */
    ZZ500_JIN: 'zz500_jin',
    /** 中证1000 */
    ZZ1000_JIN: 'zz1000_jin',

    /** SZ50_JUAN */
    SZ50_JUAN: 'SZ50_JUAN',
    /** HS300_JUAN */
    HS300_JUAN: 'HS300_JUAN',
    /** zz500_jin */
    ZZ500_JUAN: 'ZZ500_JUAN',
    /** 中证1000 */
    ZZ1000_JUAN: 'ZZ1000_JUAN',
}
const currentYeay = moment().format("YY") //24
const currentMonth = moment().format("MM") //01
console.log("currentMonth", currentMonth)




const defaultDate = moment(getDefultDate()).format(dateFormat)
let defnum = currentMonth < 10 ? `${currentMonth}` : currentMonth
let add1 = Number(currentMonth) + 1
let defnum_add = add1 < 10 ? `0${add1}` : add1
const defaultLatastMonth = `${currentYeay}${defnum}`
const defaultfARMonth = `${currentYeay}${defnum_add}`



export const Qhlhb = ({ colorConfig }) => {
    const sunListRef = useRef([])
    const dateRef = useRef(defaultDate)
    const [moreList, setMoreList] = useState([])
    const [showDesc, setShowDesc] = useState(true)
    const [showPersent, setShowPersent] = useState(true)
    const [isLoading, setIsLoading] = useState(true)
    const [qhSelectListAll, setQhSelectListAll] = useState([])
    const [sumList, setSumList] = useState([
        {
            name: '上证50近',
            key: KEY_CONFIG.SZ50_JIN,
            dayMore_number: 0,
            dayMore_cu: 0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '沪深300近',
            key: KEY_CONFIG.HS300_JIN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '中证500近',
            key: KEY_CONFIG.ZZ500_JIN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '中证1000近',
            key: KEY_CONFIG.ZZ1000_JIN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '上证50远',
            key: KEY_CONFIG.SZ50_JUAN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '沪深300远',
            key: KEY_CONFIG.HS300_JUAN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '中证500远',
            key: KEY_CONFIG.ZZ500_JUAN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
        {
            name: '中证1000远',
            key: KEY_CONFIG.ZZ1000_JUAN,
            dayMore_number: 0,
            dayMore_cu: -0,
            dayLess_number: 0,
            dayLess_cu: -0,
        },
    ])
    const [latastMonth, setLatastMonth] = useState(defaultLatastMonth)
    const [farMonth, setFarMonth] = useState(defaultfARMonth)
    const [monthSelectList, setMonthSelectList] = useState([])
    const [selectQueryDate, setSelectQueryDate] = useState(defaultDate)
    // 设置合约列表
    const initMonthDatas = () => {
        const temlist = []
        for (let i = 1; i < 12; i++) {
            let num = i < 10 ? `0${i}` : i
            // const week = getweekday(`${currentYeay}${num}`)
            temlist.push({
                label: `${currentYeay}${num}`,
                value: `${currentYeay}${num}`
            })
        }
        console.log("temlist", temlist)
        setMonthSelectList(temlist)

    }

    const queryDatas = async (d1, d2) => {
        if (["星期日", "星期六"].includes(getweekday(dateRef.current))) {
            message.warning("请选择周一到周五日期进行查询")
        }

        console.log("selectQueryDate", selectQueryDate)
        const date_Q = dateRef.current
        const farMonth_Q = d1 || farMonth
        const latastMonth_Q = d2 || latastMonth
        const getCode = (key, mo) => {
            return `${key}${mo}`
        }
        setIsLoading(true)
        // 上证50
        await handleFetchData({
            requestKey: KEY_CONFIG.SZ50_JIN,
            SECURITY_CODE: getCode('IH', latastMonth_Q),
            TRADE_DATE: date_Q,
            sortColumns: 'SPRANK',
            preTypeKey: 'SPRANK'
        })
        // 沪深300
        await handleFetchData({
            requestKey: KEY_CONFIG.HS300_JIN,
            SECURITY_CODE: getCode('IF', latastMonth_Q),
            TRADE_DATE: date_Q,
            sortColumns: 'SPRANK',
            preTypeKey: 'SPRANK'
        })
        // 中证500
        await handleFetchData({
            requestKey: KEY_CONFIG.ZZ500_JIN,
            SECURITY_CODE: getCode('IC', latastMonth_Q),
            TRADE_DATE: date_Q,
            sortColumns: 'SPRANK',
            preTypeKey: 'SPRANK'
        })
        // 中证1000
        await handleFetchData({
            requestKey: KEY_CONFIG.ZZ1000_JIN,
            SECURITY_CODE: getCode('IM', latastMonth_Q),
            TRADE_DATE: date_Q,
            sortColumns: 'VOLUMERANK',
            preTypeKey: 'VOLUMERANK'
        })



        let quersRemote = true
        if (quersRemote) {
            // 上证50
            await handleFetchData({
                requestKey: KEY_CONFIG.SZ50_JUAN,
                SECURITY_CODE: getCode('IH', farMonth_Q),
                TRADE_DATE: date_Q,
                sortColumns: 'SPRANK',
                preTypeKey: 'SPRANK'
            })
            // 沪深300
            await handleFetchData({
                requestKey: KEY_CONFIG.HS300_JUAN,
                SECURITY_CODE: getCode('IF', farMonth_Q),
                TRADE_DATE: date_Q,
                sortColumns: 'SPRANK',
                preTypeKey: 'SPRANK'
            })
            // 中证500
            await handleFetchData({
                requestKey: KEY_CONFIG.ZZ500_JUAN,
                SECURITY_CODE: getCode('IC', farMonth_Q),
                TRADE_DATE: date_Q,
                sortColumns: 'SPRANK',
                preTypeKey: 'SPRANK'
            })
            // 中证1000
            await handleFetchData({
                requestKey: KEY_CONFIG.ZZ1000_JUAN,
                SECURITY_CODE: getCode('IM', farMonth_Q),
                TRADE_DATE: date_Q,
                sortColumns: 'VOLUMERANK',
                preTypeKey: 'VOLUMERANK'
            })
        }
        setIsLoading(false)
    }
    useEffect(() => {
        console.log("0923092")
        sunListRef.current = sumList
        initMonthDatas()
        queryOptionsDataAll({
            requestKey: KEY_CONFIG.SZ50_JUAN,
            SECURITY_CODE: '',
            TRADE_DATE: '',
            sortColumns: 'SPRANK',
            preTypeKey: 'SPRANK'
        })

    }, [])

    const queryOptionsDataAll = async ({ requestKey, SECURITY_CODE, TRADE_DATE, sortColumns, preTypeKey }) => {
        console.log("查询商品数据")
        const url = 'https://datacenter-web.eastmoney.com/api/data/v1/get?reportName=RPT_FUTU_POSITIONCODE&columns=TRADE_MARKET_CODE%2CTRADE_CODE%2CTRADE_TYPE%2CSECURITY_CODE&pageNumber=1&pageSize=500&source=WEB&client=WEB'
        const filterParams = {
            SECURITY_CODE,
            TRADE_DATE,
            TYPE: 2,
            LPRANK: 9999,
            preTypeKey: preTypeKey
        }
        console.log("参数", filterParams)

        const filterUrl = `(SECURITY_CODE%3D%22${filterParams.SECURITY_CODE}%22)(TRADE_DATE%3D%27${filterParams.TRADE_DATE}%27)(TYPE%3D%222%22)(${filterParams.preTypeKey}%3C%3E9999)`
        const getParams = {
            reportName: 'RPT_FUTU_DAILYPOSITION',
            columns: 'ALL',
            filter: filterUrl,
            sortTypes: 1,
            sortColumns: sortColumns,
            // pageNumber: 1,
            // pageSize: 20,
            source: 'WEB',
            client: 'WEB'
        }

        const baseUrl = "https://datacenter-web.eastmoney.com/"
        const url1 = `${baseUrl}/api/data/v1/get?reportName=${getParams.reportName}&columns=${getParams.columns}&filter=${getParams.filter}&sortTypes=${getParams.sortTypes}&sortColumns=${getParams.sortColumns}&source=${getParams.source}&client=${getParams.client}`
        try {
            const result = await comRequest({
                url: url,
            })


            const list = result?.data?.data || []
            const l1 = list?.filter(v => ['IF',
                // 'IF',
                //  'IC', 
                //  'IM'
            ].includes(v?.TRADE_CODE)) || []
            const l2 = list?.filter(v => ['IC',
                // 'IF',
                //  'IC', 
                //  'IM'
            ].includes(v?.TRADE_CODE)) || []
            const l3 = list?.filter(v => ['Ih',
                // 'IF',
                //  'IC', 
                //  'IM'
            ].includes(v?.TRADE_CODE)) || []
            const l4 = list?.filter(v => ['IM',
                // 'IF',
                //  'IC', 
                //  'IM'
            ].includes(v?.TRADE_CODE)) || []
            const getMax = (a, b, c, d) => {
                let teml = [{
                    len: a?.length,
                    key: 1,
                    list: a
                }, {
                    len: b?.length,
                    key: 1,
                    list: b
                }, {
                    len: c?.length,
                    key: 1,
                    list: c
                }, {
                    len: d?.length,
                    key: 1,
                    list: d
                }]
                teml.sort((a, b) => b?.len - a?.len)
                console.log(7777, teml[0],)  // 6
                return teml?.[0]?.list || []
            }
            let lll = getMax(l1, l2, l3, l4)
            console.log("商品数据-list", list)

            // SECURITY_CODE
            // :
            // "SA2402"
            // TRADE_CODE
            // :
            // "SA"
            // TRADE_MARKET_CODE
            // :
            // "069001008"
            // TRADE_TYPE
            // :
            // "纯碱"

            // setMoreList(result.data.data)
            const temList = lll.map((v) => {
                let temKey = v?.SECURITY_CODE?.split(v?.TRADE_CODE)?.[1]
                return {
                    ...v,
                    label: temKey,
                    value: temKey
                }
            })
            let mm = temList?.[0]?.value || defaultLatastMonth
            let m1 = temList?.[1]?.value || defaultfARMonth
            setLatastMonth(mm)
            setFarMonth(m1)
            queryDatas(mm, m1)

            setQhSelectListAll(temList)

            // setSumList(sunListRef.current)
            setIsLoading(false)
        } catch (error) {
            console.log("error", error)

        }

    }
    console.log(999, qhSelectListAll)
    const handleFetchData = async ({ requestKey, SECURITY_CODE, TRADE_DATE, sortColumns, preTypeKey }) => {
        const url = 'https://datacenter-web.eastmoney.com/api/data/v1/get?reportName=RPT_FUTU_DAILYPOSITION&columns=ALL&filter=(SECURITY_CODE%3D%22IH2403%22)(TRADE_DATE%3D%272024-01-26%27)(TYPE%3D%222%22)(SPRANK%3C%3E9999)&sortTypes=1&sortColumns=SPRANK&source=WEB&client=WEB&_=1706369107342'
        const filterParams = {
            SECURITY_CODE,
            TRADE_DATE,
            TYPE: 2,
            LPRANK: 9999,
            preTypeKey: preTypeKey
        }
        console.log("参数", filterParams)
        //    r =: (SECURITY_CODE%3D%27IC2409%27)(TRADE_DATE%3D%272024-01-26%27)(TYPE%3D%270%27)(LPRANK%3C%3E9999)
        //         (SECURITY_CODE % 3D % 22IC2409 % 22)(TRADE_DATE % 3D % 222024 - 01 - 26 % 22)(TYPE % 3D % 220 % 22)(LPRANK % 3C % 3E9999)

        //
        // https://datacenter-web.eastmoney.com/api/data/v1/get?callback=jQuery1123026569080845923065_1706369107232&reportName=RPT_FUTU_DAILYPOSITION&columns=ALL&filter=(SECURITY_CODE%3D%22IH2403%22)(TRADE_DATE%3D%272024-01-26%27)(TYPE%3D%222%22)(SPRANK%3C%3E9999)&sortTypes=1&sortColumns=SPRANK&source=WEB&client=WEB&_=1706369107342

        // (SECURITY_CODE%3D%22IH2403%22)(TRADE_DATE%3D%272024-01-26%27)(TYPE%3D%222%22)(SPRANK%3C%3E9999)
        const filterUrl = `(SECURITY_CODE%3D%22${filterParams.SECURITY_CODE}%22)(TRADE_DATE%3D%27${filterParams.TRADE_DATE}%27)(TYPE%3D%222%22)(${filterParams.preTypeKey}%3C%3E9999)`
        const getParams = {
            reportName: 'RPT_FUTU_DAILYPOSITION',
            columns: 'ALL',
            filter: filterUrl,
            sortTypes: 1,
            sortColumns: sortColumns,
            // pageNumber: 1,
            // pageSize: 20,
            source: 'WEB',
            client: 'WEB'
        }

        const baseUrl = "https://datacenter-web.eastmoney.com/"
        const url1 = `${baseUrl}/api/data/v1/get?reportName=${getParams.reportName}&columns=${getParams.columns}&filter=${getParams.filter}&sortTypes=${getParams.sortTypes}&sortColumns=${getParams.sortColumns}&source=${getParams.source}&client=${getParams.client}`
        try {

            const result = await comRequest({
                url: url1,
            })

            console.log("result", result.data)
            const zz500s = {
                key: requestKey,
                dayMore_number: 1000,
                dayMore_cu: 1999,
            }
            const list = result.data.data || []
            const sum_zz = list.reduce((pre, current) => {
                return {
                    dayMore_number: pre.dayMore_number + current.LONG_POSITION,
                    dayMore_cu: pre.dayMore_cu + current.LP_CHANGE,
                }
            }, {
                dayMore_number: 0,
                dayMore_cu: 0,
            })
            // setMoreList(result.data.data)

            const showData = list?.[0]
            // const lessData = list?.[3]
            /**
             * 
    LONG_POSITION
    : 
    37399 //本日合计
    多增加  LP_CHANGE
    : 
    -634
    
    空合计 
    SHORT_POSITION
    : 
    51127
    空增  SP_CHANGE
    : 
    -130
             * 
             */
            console.log("中证500多单合计", sum_zz)
            const temp = sunListRef.current.map(v => {
                let te = v
                const getFixed = (num, showPer = false) => {
                    let roundedNum = num.toFixed(4)
                    return showPer ? `${roundedNum * 100}%` : roundedNum * 100
                }
                if (v.key === requestKey) {
                    const moreNum = showData.LONG_POSITION
                    const lessNum = showData.SHORT_POSITION
                    const allNum = moreNum + lessNum
                    te = {
                        ...te,
                        dayMore_number: showData.LONG_POSITION,
                        dayMore_cu: showData.LP_CHANGE,
                        dayLess_number: showData.SHORT_POSITION,
                        dayLess_cu: showData.SP_CHANGE,
                        persent_more: getFixed(moreNum / allNum),
                        persent_less: getFixed(lessNum / allNum),
                        show_more: getFixed(moreNum / allNum, true),
                        show_less: getFixed(lessNum / allNum, true)
                    }
                }
                return te
            })
            sunListRef.current = temp
            console.log("temp", temp)
            setSumList(sunListRef.current)
        } catch (error) {
            console.log("error", error)

        }

    }
    console.log("moreList", moreList)


    const columns = [
        {
            title: 'MEMBER_NAME_ABBR',
            dataIndex: 'MEMBER_NAME_ABBR',
            key: 'name',
        },
        {
            title: '多单量',
            dataIndex: 'LONG_POSITION',
            key: 'LONG_POSITION',
        },
        {
            title: '多单增减',
            dataIndex: 'LP_CHANGE',
            key: 'LP_CHANGE',
        },
    ];

    const sumColumns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '多单量',
            dataIndex: 'dayMore_number',
            key: 'dayMore_number',
        },
        {
            title: '多单增减',
            dataIndex: 'dayMore_cu',
            key: 'dayMore_cu',
        },
        {
            title: '空单量',
            dataIndex: 'dayLess_number',
            key: 'dayLess_number',
        },

        {
            title: '空单增减',
            dataIndex: 'dayLess_cu',
            key: 'dayLess_cu',
        },
        {
            title: '多单占比',
            dataIndex: 'show_more',
            key: 'show_more',
        },
        {
            title: '空单占比',
            dataIndex: 'show_less',
            key: 'show_less',
        },
    ];

    const sum_option = {
        color: [colorConfig.red, colorConfig.green, colorConfig.red, colorConfig.green],
        legend: {
            data: ['多单', "空单", '多单增减', "空单增减",]
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [

                `上证50近月${latastMonth || ''}`,
                `沪深300近月${latastMonth || ''}`,
                `中证500近月 ${latastMonth || ''}`,
                `中证1000近月${latastMonth || ''}`,
                `上证50远月${farMonth || ''}`,
                `沪深300远月${farMonth || ''}`,
                `中证500远月${farMonth || ''}`,
                `中证1000远月${farMonth || ''}`,

            ]
        },
        axisPointer: {
            type: 'shadow'
        },
        yAxis: {
            type: 'value'
        },
        label: {
            show: true,
            position: 'top'
        },
        series: [
            {
                name: '多单',
                data: sumList.map(v => ({
                    value: v.dayMore_number,
                    itemStyle: {
                        color: colorConfig.red
                    }
                })),
                type: 'bar'
            },
            {
                name: '空单',
                data: sumList.map(v => ({
                    value: v.dayLess_number,
                    itemStyle: {
                        color: colorConfig.green,
                    }
                })),
                type: 'bar'
            },
            {
                name: '多单增减',
                data: sumList.map(v => ({
                    value: v.dayMore_cu,
                    itemStyle: {
                        color: colorConfig.red
                    }
                })),
                type: 'bar'
            },
            {
                name: '空单增减',
                data: sumList.map(v => ({
                    value: v.dayLess_cu,
                    itemStyle: {
                        color: colorConfig.green,
                    }
                })),
                type: 'bar'
            },
        ]
    };
    const persent_option = {
        color: [colorConfig.red, colorConfig.green],
        legend: {
            data: ['多单', "空单"]
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [

                `上证50近月${latastMonth || ''}`,
                `沪深300近月${latastMonth || ''}`,
                `中证500近月 ${latastMonth || ''}`,
                `中证1000近月${latastMonth || ''}`,
                `上证50远月${farMonth || ''}`,
                `沪深300远月${farMonth || ''}`,
                `中证500远月${farMonth || ''}`,
                `中证1000远月${farMonth || ''}`,

            ]
        },
        axisPointer: {
            type: 'shadow'
        },
        yAxis: {
            type: 'value'
        },
        label: {
            show: true,
            position: 'top',
            formatter: '{@score}%'
        },
        series: [
            {
                name: '多单',
                data: sumList.map(v => ({
                    value: v.persent_more,
                    itemStyle: {
                        color: colorConfig.red,
                    }
                })),
                type: 'bar'
            },
            {
                name: '空单',
                data: sumList.map(v => ({
                    value: v.persent_less,
                    itemStyle: {
                        color: colorConfig.green,
                    }
                })),
                type: 'bar'
            },

        ]
    };
    useEffect(() => {
        redenEchart()
    }, [sumList, colorConfig])
    const redenEchart = () => {
        const myChart = echarts.init(document.getElementById('sum_echart'));
        myChart.setOption(sum_option);
        const persentChart = echarts.init(document.getElementById('persent_echart'));
        persentChart.setOption(persent_option);
    }

    console.log("sumList", sumList)

    const onChangeDate = (date, dateString) => {
        console.log(date, dateString);
        if (moment(dateString).isAfter(moment().format('YYYY-MM-DD'))) {
            message.warning("请不要选择未到期日期")
            return
        }
        dateRef.current = dateString
        setSelectQueryDate(dateString)
    };
    const onPanelChange = (value, mode) => {
        console.log(111, value.format('YYYY-MM-DD'), mode);
        const dateString = value.format('YYYY-MM-DD')
        if (moment(dateString).isAfter(moment().format('YYYY-MM-DD'))) {
            return
        }
        setSelectQueryDate(value.format('YYYY-MM-DD'))
        dateRef.current = value.format('YYYY-MM-DD')
    };
    const onSelect = (newValue) => {
        console.log("99", newValue.format('YYYY-MM-DD'))
        const dateString = newValue.format('YYYY-MM-DD')
        if (moment(dateString).isAfter(moment().format('YYYY-MM-DD'))) {
            message.warning("请不要选择未到期日期")
            return
        }
        setSelectQueryDate(newValue.format('YYYY-MM-DD'))
        dateRef.current = newValue.format('YYYY-MM-DD')

        queryDatas()
    };

    return <div className='header-box'>
        <Spin tip="Loading" size="small" spinning={isLoading}>
            {/* 日期选择 */}
            <Space>
                <DatePicker onChange={onChangeDate}
                    // value={moment(selectQueryDate)}
                    defaultValue={dayjs(defaultDate)}
                    locale={locale}
                    disabledDate={disabledDate}
                    value={dayjs(selectQueryDate)}
                />


                {/* 设置合约 */}
                <span>近月合约：{latastMonth}</span>
                <Select
                    style={{
                        width: 120,
                    }}
                    options={qhSelectListAll}
                    onChange={(value) => {
                        setLatastMonth(value)
                    }}
                    defaultValue={qhSelectListAll?.[0]?.value}
                    value={qhSelectListAll?.[0]?.value}
                />
                <span>远月合约：{farMonth}</span>
                <Select
                    style={{
                        width: 120,
                    }}
                    options={qhSelectListAll}
                    onChange={(value) => {
                        setFarMonth(value)
                    }}
                    defaultValue={qhSelectListAll?.[1]?.value || qhSelectListAll?.[0]?.value}
                    value={qhSelectListAll?.[1]?.value || qhSelectListAll?.[0]?.value}
                />
                <Button onClick={() => {
                    queryDatas()
                }} type='primary'>查询</Button>
                {/* <Table dataSource={moreList} columns={columns} />; */}
                <Button onClick={() => {
                    setShowDesc(!showDesc)
                }} >{!showDesc ? "展开表格" : '隐藏表格'}</Button>
            </Space>
            {showDesc && <Table dataSource={sumList} columns={sumColumns} />}
            <div className='CalendarClass'>
                <Calendar onPanelChange={onPanelChange} onSelect={onSelect} fullscreen={false} defaultValue={dayjs(defaultDate)} disabledDate={disabledDate} value={dayjs(selectQueryDate)} />
            </div>
            <NextAndPreDayBar
                currentDay={selectQueryDate}
                onChange={(val) => {
                    setSelectQueryDate(val)
                    dateRef.current = val
                    queryDatas()
                }}  ></NextAndPreDayBar>
            <div id="sum_echart" className='sum_echart_class'></div>
            <Button onClick={() => {
                setShowPersent(!showPersent)
            }} >{!showPersent ? "展开图表" : '隐藏图表'}</Button>
            {showPersent && <div id="persent_echart" className='sum_echart_class'></div>}
        </Spin>
    </div>
}